<template>
    <div class="static-container">
        <el-tabs type="card" v-model="editableTabsValue" @tab-click="updateActiveTab" @tab-remove="removeTab" closable ref="tabs">
            <el-tab-pane label="超标原因跟踪汇总表" name="first">
                <OverReasonFollowList ref="OverReasonFollow" @handleRowBtn="handleRowBtn" />
            </el-tab-pane>
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :name="item.name">
                <span slot="label"><i class="el-icon-discover"></i> {{ item.title }}</span>
                <component
                    :is="item.content"
                    :transToResultDetail="transToResultDetail"
                    :isHistory="isHistory"
                    :showDateSearch="false"
                    :isActive="item.name == editableTabsValue"
                ></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
import ColumnUtil from '../risk-time/utils/column-util';
import { getConfigItem } from '@/utils/tools';
import OverReasonDetail from './over-reason-follow/over-reason-detail.vue';
import OverReasonFollowList from './over-reason-follow/over-reason-follow-list.vue';
import OverFollowDetail from './over-reason-follow/over-follow-detail.vue';
import { SGU_CACHE } from '@/utils/diction-const-util';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'OverReasonFollow',
    components: {
        OverReasonFollowList,
        OverReasonDetail,
        OverFollowDetail,
    },
})
/**
 * 归纳：历史结果参数是结果参数的子集,命名也相同,排序字段也可以共用
 */
export default class OverReasonFollow extends Vue {
    SHOW_SECURITY = getConfigItem('SHOW_SECURITY');
    ColumnUtil = new ColumnUtil();

    private editableTabsValue: string = 'first'; // 当前标签

    transToResultDetail = {}; // 详情数据

    private editableTabs = []; // 所有tabs值

    private oldValue = 'first'; // 删除标记记录切换

    private tabRecord: any[] = []; // 标签记录
    reasonType: any = [];
    async mounted() {
        this.reasonType = await SGU_CACHE('ReasonType', '/dict/list/code/Y_000336', []);
        console.log(this.reasonType, 'reason----');
    }
    /* **************************  tab标签处理START ****************/
    // 切换标签页
    private updateActiveTab(tab): void {
        if (['first'].includes(tab.name)) {
            this.oldValue = tab.name;
        }
        if (tab.name === this.editableTabsValue) {
            return;
        }
    }

    // 移除tab
    removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
            tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        activeName = nextTab.name;
                    } else {
                        activeName = this.tabRecord[targetName];
                    }
                }
            });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }

    handleRowBtn($event) {
        let { type, row } = $event;
        this.transToResultDetail = JSON.parse(JSON.stringify(row));
        this.addTab(type, row);
    }

    // 添加超标原因
    addTab(type, row) {
        let content;
        let targetName;
        if (type == 'over-reason') {
            targetName = '超标原因' + row.resultId;
            content = OverReasonDetail;
        } else if (type == 'over-follow') {
            targetName = '超标跟踪' + row.resultId;
            content = OverFollowDetail;
        }
        let tabs = XEUtils.map(this.editableTabs, item => item.name);
        if (tabs.includes(targetName)) {
            this.editableTabsValue = targetName;
        } else {
            this.editableTabs.push({
                title: targetName,
                name: targetName,
                content,
            });
            this.editableTabsValue = targetName;
            this.$set(this.tabRecord, this.editableTabsValue, this.oldValue);
        }
    }

    /* **************************  tab标签处理END ****************/
}
</script>
<style lang="scss" scoped>
.static-container {
    padding-top: 10px;
    min-width: 1200px;
    height: 100%;
}
.static-container /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.static-container /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.static-container /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
    display: none;
}

.vxe-table .vxe-body--row.row--hover {
    background-color: #cce9ff !important;
}

.vxe-table .vxe-body--row.row--current {
    background-color: #2589f5 !important;
    color: #fff !important;
}

.el-tooltip__popper.is-dark {
    max-height: 300px;
    overflow: auto !important;
    white-space: nowrap;
}

/deep/ .el-divider--horizontal {
    margin: 0;
}
</style>
